/** 此文件主要放置 esy-ui 组件库的样式以及一些常量定义 */
export const countDownFormat = {
  sec: 's',
};

/** select 和input 组件组合样式 */
export const cnFormItem = {
  className: 'min-w-24',
  style: {
    marginBottom: '0',
  },
  selectIpt: {
    box: 'relative min-w-20',
    'value:normal': 'pr-3 text-base text-ipt-color',
    input: {
      box: 'flex items-center relative transition-border-bg-color duration-300',
      'box:outlined:bordered': 'border-0',
      'box:input:normal': 'py-1.5 pr-3 h-8 text-lg',
    },
    suffix: 'text-icon text-base transition-all duration-300',
  },
};

export default {
  loading_cn: {
    box: 'flex items-center',
    'box:spinner': 'relative inline-block w-6 h-6 max-h-full max-w-full align-middle steps-12 animate-rotate-0-360',
    'child:cube': 'w-2 h-2 bg-primary m-0.5 rounded-none animate-cube cube',
    'child:circle': 'w-2 h-2 bg-primary m-0.5 rounded-full animate-opacity-100-0 circle',
    'child:wave': 'w-1 h-2 bg-text-2 m-0.5 rounded-none animate-scale-y-1-2 wave',
    'child:spinner': 'absolute top-0 left-0 w-full h-full text-primary before:block before:w-0.5 before:h-1/4 before:bg-current before:rounded-2/5 before:mx-auto before:my-0 spinner',
  },
  cell_cn: {
    box: 'flex items-center py-2 px-3 relative overflow-hidden',
    'box:border-bottom': 'border-b border-split',
    'box:border': 'border border-split',
    'box:border-none': 'border-0',
    'box:card': 'border-b border-split bg-white text-primary-text shadow',
    content: 'flex-1 m-x-10',
    'content:title': 'text-primary-text text-base',
    'content:desc': 'text-desc text-mini',
  },
  tabs_cn: {
    box: 'flex w-full overflow-hidden',
    'box:horizontal': 'flex-col',
    'box:vertical': '',
    titles: 'relative text-base flex-nowrap pb-0.5',
    'titles:horizontal': 'flex items-center justify-between overflow-x-auto overflow-y-hidden',
    'titles:vertical': 'flex flex-col overflow-x-hidden overflow-y-auto',
    title: 'text-center transition-all duration-250 z-1 relative overflow-hidden text-nowrap break-keep whitespace-nowrap flex-1-0-auto',
    'title:horizontal': '',
    'title:vertical': '',
    'title:disabled': 'bg-disabled text-disabled-text cursor-not-allowed',
    'title:nodisabled': 'cursor-pointer',
    'title:mini': 'px-1 w-12 h-6',
    'title:small': 'px-2.5 py-1 w-24 h-8',
    'title:normal': 'px-2 py-1.5 w-18 h-8',
    'title:large': 'px-5 py-2.5 w-25 h-10',
    'title:active': 'text-text-2',
    indicator: 'absolute bg-lg-1 rounded-3xl transition-left-top duration-250 z-1',
    'indicator:horizontal': 'h-1 bottom-0',
    'indicator:vertical': 'w-0.5 left-0',
    content: 'text-sm',
    'content:horizontal': 'w-full whitespace-nowrap',
    'content:vertical': 'flex-1',
    contentitem: 'w-full inline-block align-top',
    'contentitem:horizontal': '',
    'contentitem:vertical': 'h-full',
  },
  scrollx_cn: {
    box: 'flex flex-1 shrink-0 items-center whitespace-nowrap overflow-hidden relative h-8 bg-bg-1',
    list: 'absolute text-text-1 whitespace-pre',
    animation: 'animate-scroll-x animate-running hover:animate-paused',
    text: 'mr-3',
  },
  countdown_cn: {
    time: 'text-error',
    split: 'text-error text-base',
  },
  select_cn: {
    box: 'relative',
    input: {
      box: 'flex items-center relative transition-border-bg-color duration-300',
    },
    'input:expand': '',
    'input:retract': '',
    suffix: 'text-text-21 text-base transition-all duration-300',
    'suffix:expand': 'rotate-180',
    'suffix:retract': 'rotate-0',
    value: 'absolute top-0.5 bottom-0.5 flex items-center max-w-full pointer-events-none z-1',
    'value:expand': '',
    'value:retract': '',
    'value:mini': 'px-2 text-xs',
    'value:small': 'px-3 text-sm',
    'value:normal': 'px-3 text-base text-text-21',
    'value:large': 'px-4 text-lg',
    dropwrap: 'relative w-full h-0',
    dropdown: 'absolute cursor-default left-0 z-100 w-full bg-ipt-bg top-0 text-primary-text overflow-hidden transition-all ease-in-out duration-300 ease-in-out border-x border-b border-ipt-focus',
    'dropdown:expand': 'max-h-64 shadow-md',
    'dropdown:retract': 'max-h-0 shadow-none invisible',
    options: 'max-h-64 transition-transform transition-opacity duration-200 overflow-x-hidden overflow-y-auto bg-bg-5 text-text-20',
    'options:expand': 'opacity-100 translate-y-0 delay-200',
    'options:retract': 'opacity-0 translate-y-4 delay-100',
    option: 'border-split cursor-pointer transition-all duration-250 flex items-center justify-center text-center hover:bg-label last:border-0',
    'option:active': 'bg-ipt-focus font-bold text-text-20 bg-bg-6',
    'option:mini': 'py-0 px-2.5',
    'option:small': 'py-1 px-2.5',
    'option:normal': 'py-2 px-2.5',
    'option:large': 'py-2.5 px-2.5',
    optiontext: '',
    selectedicon: 'text-ipt-color',
  },
  button_cn: {
    box: 'rounded-md justify-center flex items-center relative overflow-hidden whitespace-nowrap outline-none duration-200 transition-shadow transition-colors rounded',
    'box:mini': 'text-xs py-0 px-2 h-6',
    'box:small': 'text-xs py-0 px-2 h-8',
    'box:normal': 'text-base py-0 px-3 h-10 text-center',
    'box:large': 'text-base py-0 px-5 h-12',
    'box:default': 'text-primary-text bg-default border-transparent',
    'box:primary': 'text-white bg-bg-12 border-transparent',
    'box:link': 'text-text-1 bg-link text-lg shadow-none border border-text-1',
    'box:ghost': 'text-primary bg-link shadow-none hover:bg-primary-hover border-primary border',
    'box:success': 'text-white bg-success border-transparent',
    'box:warning': 'text-white bg-warning border-transparent',
    'box:error': 'text-white bg-error border-transparent',
    'box:disabled': 'text-disabled-text bg-disabled shadow-none cursor-not-allowed border-transparent',
  },
  checkbox_cn: {
    box: 'inline-flex items-center',
    'box:disabled': 'cursor-not-allowed pointer-events-none',
    'box:nodisabled': 'cursor-pointer',
    value: 'relative w-6 h-6 duration-200 transition-colors',
    'value:normal': 'border-split bg-ipt-bg rounded-md hover:border-ipt-hover focus-within:border-ipt-focus  focus-within:hover:border-ipt-focus',
    'value:disabled': 'bg-disabled border-disabled cursor-not-allowed',
    'value:checked':
      // eslint-disable-next-line max-len
      'border-split bg-ipt-bg rounded-md animate-checked-animate after:border-l-2 after:border-b-2 after:border-primary after:absolute after:w-7/10 after:h-2/5 after:translate-x-13/50 after:translate-y-3/5 after:-rotate-45',
    label: 'mx-2.5',
    'label:disabled': 'text-disabled-text cursor-not-allowed',
    'label:nodisabled': '',
    checkbox: 'absolute z-1 inset-0 cursor-pointer w-full h-full opacity-0 peer',
  },
  form_cn: {
    box: '',
    item: 'flex flex-1 mb-5',
    label: 'w-32 text-text-3 flex items-end justify-end mr-2 text-justify text-nowrap',
    colon: 'after:content-[":"] after:text-text-3',
    required: 'before:content-["*"] before:text-error',
    control: 'relative w-full',
    'error:def': 'text-mini text-error transition-all duration-300',
    'error:show': 'mt-0 h-4 leading-4 translate-y-0 opacity-100',
    'error:hidden': '-translate-y-1.5 opacity-0',
    'error:offset': '-mb-4',
  },
  img_cn: {
    box: 'bg-no-repeat',
    img: 'w-full h-full',
  },
  input_cn: {
    box: 'flex items-center relative transition-colors duration-300',
    'box:outlined:normal': 'cursor-text border-split rounded-md bg-header-15',
    'box:outlined:error': 'border-error cursor-text bg-ipt-bg text-error',
    'box:outlined:bordered': 'border-t-0 border-l-0 border-r-0 border-b border-solid',
    'box:outlined:nobordered': 'border-0',
    disabled: 'bg-disabled text-disabled-text cursor-not-allowed',
    'box:input:large': 'py-2 px-4 h-12 text-lg',
    'box:input:normal': 'py-1.5 px-3 h-10 text-base',
    'box:input:small': 'py-1.5 px-3 h-8 text-sm',
    'box:input:mini': 'py-0 px-2 h-6 text-xs',
    'box:textarea:large': 'text-lg',
    'box:textarea:normal': 'text-base',
    'box:textarea:small': 'text-sm',
    'box:textarea:mini': 'text-xs',
    'textarea:large': 'py-2 px-4 min-h-12',
    'textarea:normal': 'py-1.5 px-3 min-h-10',
    'textarea:small': 'py-1.5 px-3 min-h-8',
    'textarea:mini': 'py-0 px-2 min-h-6',
    standard: 'absolute z-1 w-full h-px bottom-0 right-0 transition-colors duration-300',
    'standard:normal': 'bg-split peer-focus:bg-ipt-focus peer-focus:h-px peer-focus:animate-standard-line',
    'standard:error': 'bg-error',
    input: 'border-0 bg-transparent text-ipt-color w-full outline-none placeholder:text-pld-color placeholder:text-pld-font peer',
    label: 'absolute pointer-events-none transition-all duration-100',
    'label:textarea:large': 'top-2 left-4',
    'label:textarea:normal': 'top-1.5 left-3',
    'label:textarea:small': 'top-1.5 left-3',
    'label:textarea:mini': 'top-0 left-2',
    'label:active': '-translate-x-1/5 -translate-y-17/20 scale-75 bg-ipt-bg text-ipt-color peer-focus:text-ipt-focus',
    'label:noactive': 'translate-x-0 translate-y-0 scale-100 bg-transparent text-ipt-label',
    maxlength: 'ml-2',
    currentlength: 'text-ipt-focus',
    clear: 'inline-block text-clear ml-2 cursor-pointer',
    clearfixed: 'absolute right-0 top-0 mr-2 mt-2',
    'password:icon': 'text-5 text-pld-color cursor-pointer',
  },
  switch_cn: {
    box: 'inline-flex items-center',
    'label:left': 'mr-2.5',
    'label:right': 'ml-2.5',
    'label:error': 'text-error',
    value: 'relative border-0 outline-none',
    'value:error': 'bg-error',
    'value:disabled': 'cursor-not-allowed pointer-events-none opacity-60',
    'value:nodisabled': 'cursor-pointer',
    track: 'flex items-center justify-center transition-all transition-filter duration-300 rounded-full opacity-80 border-2',
    'track:large': 'w-12 h-6',
    'track:large:active': 'bg-ipt-focus',
    'track:large:noactive': 'bg-label',
    'track:normal': 'w-14 h-5',
    'track:normal:active': 'bg-switch-2 border-border-2',
    'track:normal:noactive': 'bg-switch-1 border-border-1',
    'track:small': 'w-8 h-4 bg-label',
    'track:small:active': 'bg-ipt-focus',
    'track:small:noactive': 'bg-label',
    'track:mini': 'w-6 h-3 bg-label',
    'track:mini:active': 'bg-ipt-focus',
    'track:mini:noactive': 'bg-label',
    slider: 'transition-all duration-300 rounded-full absolute scale-85 top-0.25 border-2',
    'slider:large': 'w-6 h-6',
    'slider:large:active': 'left-1/2',
    'slider:large:noactive': 'left-0',
    'slider:normal': 'w-8 h-4.5',
    'slider:normal:active': 'left-switch bg-switch-4 border-border-2',
    'slider:normal:noactive': 'left-0 bg-switch-3 border-border-1',
    'slider:small': 'w-4 h-4',
    'slider:small:active': 'left-1/2',
    'slider:small:noactive': 'left-0',
    'slider:mini': 'w-3 h-3',
    'slider:mini:active': 'left-1/2',
    'slider:mini:noactive': 'left-0',
  },
};

// 背景图铺满
export const bG = {
  center: 'bg-cover bg-center',
  cover: 'bg-cover',
};
export const buttonSize = {
  use: 'w-15 h-6 text-text-17 text-xs text-center border-2 border-outline-2 rounded-lg',
  useOne: 'text-text-18 ml-3 text-center border-l-text-2 w-20 h-6 text-sm rounded-md bg-bg-3',
  useTwo: 'text-text-19 ml-3 text-center border-l-text-2 w-20 h-6 text-sm rounded-md bg-bg-4',
  useUpdate: 'w-15 h-6 text-text-17 text-xs text-center border-2 border-outline-2 rounded-lg',
};
